<template>
    <div class="footer">
        <ul>
            <router-link exact active-class="z-act" :key='index' v-for='(item,index) in list' :to='item.path'>
                <li >
                    <i class='iconfont' :class='item.iconfont'></i>
                    <p>{{ item.msg }}</p>
                </li>
            </router-link>
        </ul>
        <div class='gotop' @click='goback()'>
            <i class='iconfont'>&#xe600;</i>
            <span>顶部</span>
        </div>
    </div>
</template>
<script>

import { mapState, mapMutations } from 'vuex'
import $ from 'jquery'
export default {
    data() {
        return {
            list: [
                {
                    path: '/',
                    iconfont: 'icon-shouye',
                    msg: '首页'
                },
                {
                    path: '/index',
                    iconfont: 'icon-dingdan',
                    msg: '订单'
                },
                {
                    path: '/myself/shouji',
                    iconfont: 'icon-meituanwaimai',
                    msg: '我的'
                }
            ]
        }
    },
    methods:{
        goback(){
            $('body').animate({
                scrollTop:0
            },300)
        }
    },
    mounted(){
        var targetNode = $('.gotop');
        var scroll = 0;
        
        $(window).scroll(function(){
            scroll = $(window).scrollTop();

            if(scroll >= 300){
                if(targetNode.css('display') != 'block'){
                    targetNode.css('display','block');
                }
            }else{
                if(targetNode.css('display') != 'none'){
                    targetNode.css('display','none');
                }
            }
        })
    }
}
</script>
<style lang="scss" scoped>
@import '../../static/hotcss/px2rem.scss';

.z-act{
    i{
 color: yellow;
    }
   
}
.footer {
    height: px2rem(98);
    border-top: 1px solid #ccc;
    position: fixed;
    bottom: 0;
    background: rgba(246, 246, 246, 0.95);
    display: flex;
    width: 100%;
    padding-top: px2rem(15);
    .gotop{
        width: px2rem(100);
        height: px2rem(100);
        border: px2rem(2) solid #CCC;
        border-radius: 50%;
        position: absolute;
        right: px2rem(20);
        bottom: px2rem(150);
        // background: red;
        border: px2rem(4) solid #CCC;
        text-align: center;
        display: none;
        opacity: 0.5;
        text-align: center;
        
        span{
            font-size: px2rem(20);
            display: block;
        }
        i{
            font-size: px2rem(50);
            // line-height: px2rem(100);
        }
    }
    ul {
        width:100%;
        display: flex;
        a {
            display: inline-block;
            flex: 1;
            line-height: px2rem(50);
            li {
                i{
                    font-size: px2rem(45);
                }
                p{
                    margin-top: px2rem(-10);
                }
                display: flex;
                color: #999;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-size: px2rem(22);
                    
            }
        }
    }
}
</style>

